<template>
  <div>
    <!-- 渲染角色列表 -->
    <el-checkbox-group v-model="roleIds">
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>

    <!-- 底部按钮 -->
    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="addRole">确定</el-button>
        <el-button size="small" @click="cancleDialog">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRolesAPI } from '@/api/settings'
import { getUserDetailInfoAPI } from '@/api/user'
import { assignRolesAPI } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      // 复选框绑定的数组,选中某一个就会把其label添加进这个数组
      roleIds: [],

      // 请求回来的角色列表,页面渲染
      roleList: []

    }
  },
  created() {
    // 调用获取角色列表方法
    this.getRolesList()

    // 调用获取角色详情方法
    this.getRolesInfo()
  },
  methods: {
    // 点弹框里确定按钮
    async addRole() {
      // 调接口,传参数
      const res = await assignRolesAPI({ id: this.userId, roleIds: this.roleIds })

      // 反馈用户
      this.$message.success(res.message)

      // 关闭弹窗
      this.$emit('close')
    },

    // 声明获取角色列表方法
    async getRolesList() {
      // 调接口
      const res = await getRolesAPI()

      // 赋值
      this.roleList = res.data.rows
    },

    // 声明获取角色详情方法
    async getRolesInfo() {
      // 调接口,传参userId
      const res = await getUserDetailInfoAPI(this.userId)

      // 把roleIds取出来并赋值,数据回填
      this.roleIds = res.data.roleIds
    },

    // 点弹框里取消按钮
    cancleDialog() {
      // 子派发,父监听
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
